<template>
	<view>
		<view class="handForm">
			<view class="handBillTabs">
				<view @click="handTabsNav('tab1')" class="tab1" :class="{active: tabs.active}">{{tabs.tab1.title}}</view>
				<view @click="handTabsNav('tab2')" class="tab2" :class="{active: !tabs.active}">{{tabs.tab2.title}}</view>
			</view>
			<!-- tab1 container -->
			<view v-if="tabs.active">
				<form id="form1" class="handFormBox" @submit="formSubmit" @reset="formReset">
					<view class="uni-form-item uni-column" 
						v-for="(item, index) in tabs.tab1.form.list" :key="index"
					>
						<view class="title">{{item.title}}</view>
						<view>
							<input class="uni-input" v-model="item.value" 
								:name="item.name" :placeholder="item.placeholder" 
							/>
						</view>
					</view>
				</form>
				<view class="content">
					<view class="">
						<text class="conText">1.可查验使用增值税发票管理新系统开具的发票，包括：</text>
					</view>
					<view class="">
						<text class="conText">(1)增值税专用发票,卷式发票,通行费发票></text>
					</view>
					<view class="">
						<text class="conText">(3)机动车销售统一发票></text>
					</view>
					<view class="">
						<text class="conText">(4)货物运输业增值税专用发票</text>
					</view>
					<view class="">
						<text class="conText">(5)二手车销售统一发票</text>
					</view>
					<view class="">
						<text class="conText">不在上述范围之内的发票，请按照原查验渠道进行查验</text>
					</view>
					<view>
						<text class="conText">2.可查验的时间范围：</text>
					</view>
					<view>
						<text class="conText">(1)可检查最近一年内增值税发票管理新系统开具发票</text>
					</view>
					<view>
						<text class="conText">(2)当日开具的发票如开票方已将发票数据上传税局，则当日可查检否则最快次日插件</text>
					</view>
						<text class="conText">3.每天每张发票可在线查询次数位5次，超过次数后请与次日再进行查验操作</text>
				</view>
				<button type="primary" style="background-color: #32B4C4;">确定</button>
			</view>
			<!-- tab2 container -->
			<view v-if="!tabs.active">
				<form id="form1" class="handFormBox" @submit="formSubmit" @reset="formReset">
					<view class="uni-form-item uni-column" 
						v-for="(item, index) in tabs.tab2.form.list" :key="index"
					>
						<view class="title">{{item.title}}</view>
						<view>
							<input class="uni-input" v-model="item.value" 
								:name="item.name" :placeholder="item.placeholder" 
							/>
						</view>
					</view>
				</form>
				<button type="primary" style="background-color: #32B4C4;margin-top: 30px;;">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: {
					active: true,
					tab1: {
						title: "增值税发票",
						form: {
							list: [
								{
									'title': '发票代码',
									'placeholder': '请输入10或者12位发票代码',
									'name': 'input',
									'value': ''
								},
								{
									'title': '发票号码',
									'placeholder': '请输入8位发票号码',
									'name': 'input',
									'value': ''
								},
								{
									'title': '日期',
									'placeholder': '请输入发票日期 例如：20160817',
									'name': 'input',
									'value': ''
								},{
									'title': '金额',
									'placeholder': '请输入金额(不含税)',
									'name': 'input',
									'value': ''
								}
							]
						}
					},
					tab2: {
						title: "区块链电子普通发票",
						form: {
							list: [
								{
									'title': '发票代码',
									'placeholder': '请输入10或者12位发票代码',
									'name': 'input',
									'value': ''
								},
								{
									'title': '发票号码',
									'placeholder': '请输入8位发票号码',
									'name': 'input',
									'value': ''
								},
								{
									'title': '日期',
									'placeholder': '请输入发票日期 例如：20160817',
									'name': 'input',
									'value': ''
								},{
									'title': '金额',
									'placeholder': '请输入金额(不含税)',
									'name': 'input',
									'value': ''
								},{
									'title': '校验码',
									'placeholder': '请输入校验码',
									'name': 'input',
									'value': ''
								}
							]
						}	
					}
				}
			}
		},
		methods: {
			handTabsNav (item) {
				if(item === "tab1") {
					this.tabs.active = true
				}else {
					this.tabs.active = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.handForm{
		width: 100%;
		height: auto;
		background-color: #fff;
		box-sizing: border-box;
		padding: 10px;
		.handBillTabs{
			width: 100%;
			height: 60rpx;
			line-height: 56rpx;
			overflow: hidden;
			background-color: #EBECEE;
			margin-bottom: 20px;
			.active{
				height: 56rpx;
				border-radius: 5px;
				border: 1px solid #ccc;
				background-color: #fff;
				box-sizing: border-box;
			}
			.tab1, .tab2{float: left;width: 50%;text-align: center;}
			.tab1{}
		}
		.handFormBox{
			width: 100%;
			height: auto;
			.title, .uni-input{
				height: 80rpx;
				line-height: 80rpx;
			}
			.uni-input{border-bottom: 1px solid #ccc;}
		}
		.content{background-color: #f9f9f9;padding: 10px 0;
			.conText{
				line-height: 60rpx;
			}
		}
	}
</style>
